<template>
  <div>
  <div>App</div>
  <button @click="comp='News'">新闻</button>
  <button @click="comp='Music'">音乐</button>
  <button @click="comp='Game'">游戏</button>

      <!-- 
      如何监听已经被keep-alive缓存的组件失活和激活????使用两个生命周期函数
        - activated:被 keep-alive 缓存的组件激活时调用
        - deactivated:被 keep-alive 缓存的组件失活时调用
     -->
     <!-- <keep-alive include="News"> -->
      <keep-alive>
      <component :is="comp" ></component>
     </keep-alive>
    

     
    </div>
</template>

<script>
import Music from './components/Music'
import News from './components/News'
import Game from './components/Game'
export default {
name:"App",
components:{
  Music,
  News,
  Game
},
data(){
  return{
    comp:""
  }

  
}
}
</script>

<style>

</style>